<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!-- 定义文档字符编码为UTF-8，支持中文等多语言正常显示，避免文本乱码 -->

    

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- 控制移动设备视图端口：宽度与设备一致，初始缩放比例1.0，禁止用户缩放，确保响应式布局正确渲染 -->

    

    <meta name="description" content="HTML5元数据标签实践示例，系统展示meta、title、link等标签的用法及作用">

    <!-- 页面核心描述，搜索引擎会抓取该内容用于搜索结果展示，直接影响用户点击意愿 -->

    

    <meta name="keywords" content="HTML5, 元数据标签, meta标签, 前端开发, SEO优化">

    <!-- 页面核心关键词集合，帮助搜索引擎识别页面主题分类，提升相关关键词的搜索排名 -->

    

    <meta name="author" content="张三">

    <!-- 标注页面作者信息，便于版权追溯和作者身份识别 -->

    

    <meta name="robots" content="index, follow">

    <!-- 控制搜索引擎抓取行为：index允许索引本页面，follow允许跟踪页面内链接，默认为all -->

    

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 针对IE浏览器的兼容性设置，强制使用最新版本的渲染引擎，避免老式渲染模式导致的显示问题 -->

    

    <meta http-equiv="refresh" content="30">

    <!-- 自动刷新机制，设置30秒后自动刷新当前页面，常用于实时数据展示页面 -->

    

    <title>HTML5元数据标签完整示例</title>

    <!-- 页面标题，显示在浏览器标签栏和书签中，是搜索引擎结果的核心标题，权重高于description -->

    

    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- 定义页面图标（favicon），显示在浏览器标签栏、书签栏和搜索结果中，增强品牌识别度 -->

    

    <link rel="canonical" href="https://example.com/meta-tags">

    <!-- 规范链接，指定页面的首选URL，解决多个URL指向同一内容的重复内容问题，提升SEO权重 -->

</head>

<body>

    <h1>HTML5元数据标签实践页面</h1>

    <p>本页面展示了完整的元数据标签体系，包括基础信息、SEO优化、兼容性控制等类别</p>

</body>

</html>